<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<meta name="referrer" content="no-referrer" />
		<!--做兼容-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>房屋信息</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style>
			.big{
				width: 1220px;
				margin: 0 auto;
				overflow: hidden;
				/* background: forestgreen; */
			}
			.header{
				width: 1180px;
				height: 60px;
				/* background: red; */
				margin-left: 19px;
				overflow: hidden;
			}
			.header img{
				width: 180px;
				margin-top: 1px;
				float: left;
				margin-left: -60px;
			}
			.header p{
				float: right;
				font-size: 24px;
				color: #666666;
				margin-top: 16px;
				padding-left: 14px;
				margin-right: 4px;
			}
			.banner{
				width: 1178px;
				height: 280px;
				margin: 0 0 20px 19px;
			}
			.seach{
				width: 1178px;display: block;overflow: hidden;margin-left: 19px;margin-bottom: 20px;
			}
			.main{
				width: 1210px;
				overflow: hidden;
			}
			.main1{
				    position: relative;
				    float: left;
				    margin: 0 0 19px 19px;
				    width: 280px;
				    height: 338px;
				    background-color: #fff;
				    -webkit-transition: all .2s linear;
				    transition: all .2s linear;
					cursor: pointer;
					/* box-shadow:0px 3px 7px 0px rgba(54,88,167,0.07); */
					border-radius:4px;

			}
			.main1:hover{
				box-shadow:0px 1px 21px 0px rgba(98,98,98,0.2);
			}
			.main1 img{
				width: 100%;
				height: 160px;
				display: block;
			}
			.main1  p{
						margin-bottom: 10px;
				    height: 20px;
				    line-height: 20px;
				    overflow: hidden;
				    -o-text-overflow: ellipsis;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    color: #433e33;
				    font-size: 14px;
			}
			.item-body {
			    padding: 16px 12px 16px 12px;
			    /* height: 86px; */
			}
			.price-font-big{
				height: 34px;
				line-height: 34px;
			}
			.item-foot {
			    height: 28px;
			    line-height: 28px;
			    background: #787878;
			    color: #fff;
					padding-left: 10px;
					padding-right: 10px;
			    overflow: hidden;
			}
			.item-foot span{
				float: left;
			}
			.item-foot a{
				float: right;
				display: inline-block;
				text-decoration: none;
				color: #fff;
			}
			.price-font-big  span{
				float: left;
			}
			.price-font-big  a{
				float: right;
				display: inline-block;
				text-decoration: none;
				/* color: #fff; */
			}
			.ss{
				width: 80px;
				line-height: 30px;
				border-radius: 8px;
				text-align: center;
				display: inline-block;
				background: #409EFF;
				margin-top: 2px;
				color: #fff;
				cursor: pointer;
				margin-top: 21px;
				margin-left: 14px;
			}
			#demo1{
				text-align: center;
				margin: 0 auto;
			}
			.form-control{
				font-size: 16px;
			}
			.seach2{
				margin-top: 18px;
			}
			.zt{
				display: none;
			}
			@media screen and (max-width: 750px) {
				/* *{
					font-size: 0.12rem;
				} */
			    .big{
			    	width: 100%;
			    }
				.header{
					width: 100%;
					margin-left: 0;
				}
				.banner{
					width: 100%;
					margin: 0 0 20px 0;
					display: none;
				}
				.seach{
					width: 100%;
					margin: 0;
					margin-top: 10px;
				}
				.main{
					width: 100%;
				}
				.seach1{
					margin-top: 0;
					margin-bottom: 4px;
				}
				.seach2{
					margin-top: 0;
				}
				.ss{
					width: 80px;
					line-height: 30px;
					border-radius: 8px;
					text-align: center;
					display: inline-block;
					background: #409EFF;
					margin-top: 2px;
					color: #fff;
					cursor: pointer;
					margin-top: 4;
				   float: right;
				   margin-right: 16px;
				   margin-bottom: 4px;
				}
				.main1 {
				    position: relative;
				    float: left;
				    margin: 0 0 19px 1px;
				    width: 49%;
				    height: auto;
				    background-color: #fff;
				    -webkit-transition: all .2s linear;
				    transition: all .2s linear;
				    cursor: pointer;
				    /* box-shadow: 0px 3px 7px 0px rgba(54,88,167,0.07); */
				    border-radius: 4px;
				}
				.item-foot {
				    height: 28px;
				    line-height: 28px;
				    background: #787878;
				    color: #fff;
				    padding: 0;
				    overflow: hidden;
				}
				.item-foot span{
					float: left;
					display: none;
				}
				.item-foot a{
					width: 100%;
					display: block;
					/* float: right; */
					display: inline-block;
					text-decoration: none;
					color: #fff;
					text-align: center;
					margin: 0 auto;
				}
				.item-body {
				    padding: 6px 4px 6px 4px;
				    /* height: 86px; */
				}
				.header p {
				    float: right;
				    font-size: 24px;
				    color: #666666;
				    margin-top: 16px;
				    padding-left: 0;
				    margin-right: 8px;
				}
				.main1 p {
				    margin-bottom: 4px;
				    height: 20px;
				    line-height: 20px;
				    overflow: hidden;
				    -o-text-overflow: ellipsis;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    color: #433e33;
				    font-size: 12px;
				}
				.main1 img {
				    width: 100%;
				    height: auto;
				    display: block;
				}
				.zt{
					display: block;
					font-size: 12px;
				}
				.form-control {
				    font-size: 12px;
				}
				.price-font-big  span{
					float: left;
					font-size: 12px;
				}
				.price-font-big  a{
					float: right;
					display: inline-block;
					text-decoration: none;
					font-size: 12px;
					/* color: #fff; */
				}
			}
						
			
		</style>

	</head>

	<body>
		<div class="big">
			<div class="header">
				<img  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=701696698,524136674&fm=26&gp=0.jpg" />
				<p>房屋信息查询系统</p>
			</div>
			<img class="banner" src="img/1.png" />
			<div class="seach">
			<div class="col-sm-3  seach1">
				<select name="input_province" id="input_province" class="form-control">
					<option value="">北京市</option>
				</select>
			</div>
			<div class="col-sm-3 seach1">
				<select name="input_city" id="input_city" class="form-control">
					<option value="">北京市</option>
				</select>
			</div>
			<div class="col-sm-3 seach1">
				<select name="input_area" id="input_area" class="form-control">
					<option value="">--请选择区--</option>
					<option value="100001001">东城区</option>
					<option value="100001002">西城区</option>
					<option value="100001003">海淀区</option>
					<option value="100001004">崇文区</option>
					<option value="100001005">宣武区</option>
					<option value="100001006">朝阳区</option>
					<option value="100001007">丰台区</option>
					<option value="100001008">石景山区</option>
					<option value="100001009">门头沟</option>
					<option value="100001010">房山区</option>
					<option value="100001011">通州区</option>
					<option value="100001012">顺义区</option>
					<option value="100001013">昌平区</option>
					<option value="100001014">大兴区</option>
					<option value="100001015">平谷区</option>
					<option value="100001016">怀柔区</option>																																																																																																																																																																																																																																																																																																																																																																																																																																	
					<option value="100001017">密云区</option>
					<option value="100001018">延庆区</option>
				</select>
			</div>
			
			<div class="col-sm-3 seach1">
				<select name="status" id="status" class="form-control">
					<option value="">--请选择状态--</option>
					<option value="finish">成交</option>
					<option value="ing">正在拍卖</option>
					<option value="ready">即将开始</option>
					<option value="zanhuan">暂缓</option>
					<option value="chepai">撤拍</option>
					<option value="liubiao">流标</option>
					<option value="liupai">流拍</option>
					<option value="quxiao">取消</option>
					<option value="zhongzhi">中止</option>
					<option value="chehui">撤回</option>
				</select>
			</div>
			
			<div class="col-sm-3 seach1 seach2">
				<select name="source" id="source" class="form-control">
					<option value="">--请选择来源--</option>
					<option value="公拍网">公拍网</option>
					<option value="中拍平台">中拍平台</option>
					<option value="京东拍卖">京东拍卖</option>
					<option value="阿里拍卖">阿里拍卖</option>
					<option value="ICBC">ICBC</option>
					<option value="人民法院">人民法院</option>
					<option value="北交互联">北交互联</option>
				</select>
			</div>

			<div class="col-sm-3 seach1 seach2">
			<input type="text" class="form-control" id="homeName"  placeholder="请输入房子名称" />
			</div>
			<div class="ss" id="search_btn">搜索</div>
			</div>
			
			<div class="main">
				
			<!-- <div class="main1">
				<img src="http://img13.360buyimg.com/imgw/s288x1000_jfs/t1/84950/40/15317/132612/5e6f3737E9f4325c0/3729ef9cf2437474.jpg!q80!cc_3x2" />
				<div class="item-body">
					<p>广州市荔湾区光复北路桃源街 24 号 203 房</p>
					<div class="price-font-big">
						<span>当前价:￥1290</span>
						<em>北京</em>
					</div>
					<div class="price-font-big">
						<span>评估价:￥998</span>
						<em>一次出价</em>
					</div>
				</div>
				<div class="item-foot">
					<span>拍卖中</span>
						<em>时间:2020年4月8号</em>
				</div>
			</div> -->
			</div>
			<div id="demo1"></div>
			
	
		</div>


		<!--jquery.js引入必须在bootstrap.js前面;bootstrap给予jquery-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="layui/layui.all.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layui/lay/modules/layer.js"></script>
		<script src="layui/lay/modules/laypage.js"></script>
		<script src="layui/lay/modules/element.js"></script>
		<script>
			$(document).ready(function() {
				layui.use(['jquery', 'element', 'laypage', 'layer','laydate'], function() {
					//var msg = '';
					var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
					var $ = layui.jquery
					var layer = parent.layer === undefined ? layui.layer : parent.layer,
							laydate = layui.laydate,
							laypage = layui.laypage;
					//         分页
					/*   laypage.render({
					      elem: 'demo1'
					      ,count: 20 //数据总数
					  }); */
						
			 function getList(){
				 var a = $('#source').val();
				 var b = $('#status').val();
				 var c = $('#input_area').val();
				 var d = $('#homeName').val();
					$.ajax({
						type: "get",
						url: "/list",
						data: {
							//size: 10,
								source:a,
								search:d,
								status:b,
								area:c,
							limit: 12,
							page: 1
						},
						success: function(res) {
							var str1 = '';
							var pid = ''
							// console.log(res.data)
							dataList = res.data;
							if (res.code == 0) {
								$.each(dataList, function(i, name) {
									if(name.status == 'finish'){
										name.status = '成交';
									}else if(name.status == 'ing'){
										name.status = '正在拍卖';
									}else if(name.status == 'ready'){
										name.status = '即将开始';
									}else if(name.status == 'zanhuan'){
										name.status = '暂缓';
									}else if(name.status == 'liubiao'){
										name.status = '流标';
									}else if(name.status == 'chepai'){
										name.status = '撤拍';
									}else if(name.status == 'liupai'){
                                        name.status = '流拍';
                                    }else if(name.status == 'quxiao'){
										name.status = '取消';
									}else if(name.status == 'zhongzhi'){
										name.status = '中止';
									}else if(name.status == 'chehui'){
										name.status = '撤回';
									}else if(name.status == null){
										name.status = '';
									}
									
									// 这里是数据拼接
									str1 += "<div class='main1' onclick='window.open(\"" + name.link + "\")'>";
									str1 += "<img class='imgs' src='" + name.img + "' />"
									str1 += "<div class='item-body'>"
									str1 += "<p title='" + name.title + "'>" + name.title + "</p>"
									str1 += "<div class='price-font-big'>"
									str1 += "<span>当前价:" + name.price + "元</span>"
									str1 += "<a>北京</a>"
									str1 += "</div>"
									str1 += "<div class='price-font-big'>"
									str1 += "<span>评估价:" + name.allPrice + "元</span>"
									// str1 += "<a>一次性</a>"
									str1 += "</div>"
									str1 += "<div class='zt'>状态："+ name.status +"</div>"
									str1 += "</div>"
									str1 += "<div class='item-foot'>"
									str1 += "<span>"+ name.status +"</span>"
									str1 += "<a>时间:"+name.endTime+"</a>"
									str1 += "</div>"
									str1 += "</div>";
									// str1 += "<p class='p-title' id="+name.id+">" + name.title + "</p>"
									// str1 += "<p class='p-timer'>"+new Date(name.createTime).format("yyyy-MM-dd hh:mm:ss")+"</p>"
								});
								$(".main").html(str1);
								laypage.render({
									elem: 'demo1',
									count: res.count,
									limit: 12,
									theme: '#2F6CAF',
									jump: function(obj, first) {
										//首次不执行
										if (!first) {
											console.log($(".main"));
											$.ajax({
												type: "get",
												url: "/list",
												data: {
													source:a,
													search:d,
													status:b,
													area:c,
													limit: 12,
													page: obj.curr
												},
												success: function(res) {
													var str1 = '';
													var pid = ''
													// console.log(res.data)
													dataList = res.data;
													if (res.code == 0) {
														$.each(dataList, function(i, name) {
															// 这里是数据拼接
															if(name.status == 'finish'){
																name.status = '成交';
															}else if(name.status == 'ing'){
																name.status = '正在拍卖';
															}else if(name.status == 'ready'){
																name.status = '即将开始';
															}else if(name.status == 'liubiao'){
																name.status = '流拍';
															}else if(name.status == 'zanhuan'){
																name.status = '撤拍';
															}else if(name.status == 'liupai'){
                                                                name.status = '流拍';
                                                            }else if(name.status == 'chepai'){
																name.status = '流标';
															}else if(name.status == 'quxiao'){
																name.status = '取消';
															}else if(name.status == 'zhongzhi'){
																name.status = '中止';
															}else if(name.status == 'chehui'){
																name.status = '撤回';
															}else if(name.status == null){
																name.status = '';
															}
															str1 += "<div class='main1' onclick='window.open(\"" + name.link + "\")'>";
															str1 += "<img class='imgs' src='" + name.img + "' />"
															str1 += "<div class='item-body'>"
															str1 += "<p>" + name.title + "</p>"
															str1 += "<div class='price-font-big'>"
															str1 += "<span>当前价:" + name.price + "元</span>"
															str1 += "<a>北京</a>"
															str1 += "</div>"
															str1 += "<div class='price-font-big'>"
															str1 += "<span>评估价:" + name.allPrice + "元</span>"
															// str1 += "<a>一次性</a>"
															str1 += "</div>"
															str1 += "<div class='zt'>状态："+ name.status +"</div>"
															str1 += "</div>"
															str1 += "<div class='item-foot'>"
															str1 += "<span>"+ name.status +"</span>"
															str1 += "<a>时间:"+name.endTime+"</a>"
															str1 += "</div>"
															str1 += "</div>";
																														
														});
														$(".main").html(str1);
			
													}
												},
												error: function(error) {
													console.log("房屋列表请求错误");
												}
											});
										}
									}
								});
							}
						},
						error: function(error) {
							console.log("房屋列表请求错误");
						}
					});
					}
					getList();
					$('#search_btn').click(function (){
						// var a = $('#input_province').val();
						// var b = $('#input_city').val();
						// var c = $('#input_area').val();
						// var d = $('#homeName').val();
						
						// console.log(a);
						// console.log(b);
						// console.log(c)
						// console.log(d)
						getList();
					})
					
			
			
				});
			});
			
		</script>
	</body>

</html>
